<template>
  <m-box title="品质管理" class="quality-management">
    <ul class="w-row">
      <li class="w-item">
        <div class="w-item__title">当月来料合格率</div>
        <div class="w-item__content">
          <dv-water-level-pond :config="iqcMonthConfig" />
        </div>
      </li>
      <li class="w-item">
        <div class="w-item__title">当月成品合格率</div>
        <div class="w-item__content">
          <dv-water-level-pond :config="oqcMonthConfig" />
        </div>
      </li>
    </ul>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { numberFormat } from '@/utils/tools'
import { onMounted } from 'vue'
// 来料合格率
const iqcMonthConfig = ref({
  data: [0],
  shape: 'roundRect',
  colors: ['#1370FB']
})
// 成品合格率
const oqcMonthConfig = ref({
  data: [0],
  shape: 'roundRect',
  colors: ['#B83CFF']
})

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/GetMOQualityReport')
    iqcMonthConfig.value.data = [res.iqcMonthRate]
    oqcMonthConfig.value.data = [res.oqcMonthRate]
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.quality-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 100%;
          // padding: 20px;
          display: flex;
          justify-content: center;

          .w-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 20px;
            .w-item__title {
              display: inline-block;
              font-size: 18px;
              font-weight: 700;
              color: rgb(24, 186, 214);
              padding: 0 10px;
              margin-bottom: 5px;
              line-height: 40px;
              // border: 2px dotted rgb(63, 150, 165);
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              .dv-water-pond-level {
                width: 100px;
                height: 140px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
